import * as React from "react"
import { observer, inject } from "mobx-react"
import {
  View,
  Text,
  ImageStyle,
  ImageBackground,
  TextStyle,
  ScrollView,
  ViewStyle
} from "react-native"
import { Screen } from "../../components/screen"
import { NavigationScreenProps } from "react-navigation"
import { images } from "../../assets"
import Banner from "../../components/banner"
import { px2dp } from "../../utils"

export interface HomeScreenProps extends NavigationScreenProps<{}> {
  rootStore?: any
}

const TopTitle = props => {
  const topTitleStyle: ViewStyle = {
    marginTop: px2dp(12),
    paddingHorizontal: px2dp(13)
  }

  const topTitleImageStyle: ImageStyle = {
    position: "relative",
    width: "100%",
    height: px2dp(44)
  }

  const textStyle: TextStyle = {
    color: "#fff",
    position: "absolute",
    right: px2dp(32),
    height: px2dp(44),
    lineHeight: px2dp(44),
    fontSize: px2dp(18)
  }

  return (
    <View style={topTitleStyle}>
      <ImageBackground style={topTitleImageStyle} source={images.sport.index.topInPlayTitle}>
        <Text style={textStyle}>368</Text>
      </ImageBackground>
    </View>
  )
}

const TopCarousel = () => {
  const topCarouselStyle = {
    height: px2dp(143),
    marginTop: px2dp(11),
    paddingLeft: px2dp(13)
  }

  const itemStyle = {
    width: px2dp(147),
    height: px2dp(143),
    marginRight: px2dp(7)
  }

  return (
    <ScrollView style={topCarouselStyle} horizontal={true} showsHorizontalScrollIndicator={false}>
      <ImageBackground style={itemStyle} source={images.sport.index.topEventBg} />
      <ImageBackground style={itemStyle} source={images.sport.index.topEventBg} />
      <ImageBackground style={itemStyle} source={images.sport.index.topEventBg} />
    </ScrollView>
  )
}

@inject("rootStore")
@observer
export default class SportScreen extends React.Component<HomeScreenProps, {}> {
  componentDidMount() {
    // this.props.rootStore.betRecordStore.getGameList()
  }

  render() {
    return (
      <Screen preset="scroll">
        <Banner
          imgItems={[
            images.sport.index.defaultBannerImage,
            images.sport.index.defaultBannerImage,
            images.sport.index.defaultBannerImage
          ]}
        />

        <TopTitle />
        <TopCarousel />
      </Screen>
    )
  }
}
